<template>
  <div>
     <!-- Breadcrumb 面包屑 导航区-->
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">工作站管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>工作站列表</el-breadcrumb-item>
    </el-breadcrumb>
     <!-- Card 卡片 卡片视图区-->
     <el-card class="box-card">
        <!-- 表格区-->

        <el-table :data="dataList" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column label="是否报警" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isalert" :active-value="1"
          :inactive-value="0"  @change="changeSwitch(scope.row)"></el-switch>
          </template>
          </el-table-column>
          <el-table-column label="CPU状态" align="center">
            <template slot-scope="scope">
                <el-tag
                    :type="scope.row.response_cpu==='ok'?'success':'danger'"
                >{{scope.row.response_cpu==='ok'?'正常':'异常'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="内存状态" align="center">
          <template slot-scope="scope">
              <el-tag
                  :type="scope.row.response_mem==='ok'?'success':'danger'"
              >{{scope.row.response_mem==='ok'?'正常':'异常'}}</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="进程状态" align="center">
        <template slot-scope="scope">
            <el-tag
                :type="scope.row.response_pid1==='ok'?'success':'danger'"
            >{{scope.row.response_pid1==='ok'?'正常':'异常'}}</el-tag>
        </template>
    </el-table-column>
    <el-table-column label="进程状态（客户端）" align="center">
      <template slot-scope="scope">
          <el-tag
              :type="scope.row.response_cpid1==='ok'?'success':'danger'"
          >{{scope.row.response_cpid1==='ok'?'正常':'异常'}}</el-tag>
      </template>
    </el-table-column>
          <el-table-column prop="up_time" label="更新日期"></el-table-column>

          <el-table-column label="操作">
             <!-- 操作模板-->
        <template  slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="showDialog(scope.row.id)"
              >查看</el-button>
          </template>
          </el-table-column>
        </el-table>
     </el-card>
     <el-dialog
     title="警告"
     :visible.sync="DialogAlertVisible"
     width="50%"
     center
     >
      <div v-if="isalert" >

        <el-alert
          title="系统报警，请检查出错的工作站！"
          type="error"
          effect="dark"
          :closable="false"
          >
        </el-alert>
        <audio controls="controls" hidden src="http://172.18.42.200/static/mp3/alert.mp3" ref="audio" id="myaudio"></audio>

      </div>
      <span slot="footer" class="dialog-footer">
         <el-button @click="DialogAlertVisible = false">取 消</el-button>
         <el-button type="primary" @click="DialogAlertVisible = false">确 定</el-button>
      </span>
      </el-dialog>
       <!-- 详细信息的对话框-->
      <el-dialog
      title="查看工作站信息"
      :visible.sync="DialogVisible"
      width="60%"
      @close="DialogClosed"
      center
      >
      <div algign="center">
      <el-row :gutter="20">
        <el-col :span="7"><div class="grid-content bg-purple"> 名称：{{form.name}}</div></el-col>
        <el-col :span="7"><div class="grid-content bg-purple"> IP地址：{{form.ip}}</div></el-col>
        <el-col :span="7"><div class="grid-content bg-purple"> 更新时间：{{form.up_time}}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10"><div class="grid-content bg-purple"> CPU使用率：{{form.cpu}}</div></el-col>
        <el-col :span="10"><div class="grid-content bg-purple"> CPU状态：{{form.response_cpu}}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"><div class="grid-content bg-purple"> 总内存： {{form.mem_total}}</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple"> 已使用内存：{{form.mem_used}}</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">已使用内存比率：{{form.mem_usedp}}</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">内存状态：{{form.response_mem}}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"><div class="grid-content bg-purple"> 进程名称：{{form.pid1_name}}</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple"> 进程详情：{{form.pid1_state}}</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">进程已使用内存：{{form.pid1_mem}}</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">进程状态：{{form.response_pid1}}</div></el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="DialogClosed">确 定</el-button>
    </span>
      </el-dialog>
  </div>
  </template>

<script>
export default {
  data () {
    return {
      timer: null,
      isalert: false, // 是否报警
      DialogVisible: false, // 查看对话框显示与隐藏
      DialogAlertVisible: false, // 报警对话框显示与隐藏
      dataList: [], // 故障列表
      total: 0, // 总共有多少条数据
      form: {}, // 详细信息
      queryInfo: {
        // query: '',
        pagenum: 1, // 当前页码数
        pagesize: 50 // 当前每页有多少条

      }
    }
  },

  methods: {
    async getListData () {
      console.log(this.queryInfo)
      const { data: res } = await this.$post('Stations/get_list', this.queryInfo)

      if (res.meta.status !== 200) return this.$message.error('获取数据失败' + res.meta.msg)
      this.dataList = res.data.data
      this.total = res.data.total
    },
    async showDialog (id) { // 显示查看
      // 获取故障详细信息
      const { data: res } = await this.$post('Stations/get_detail', {id: id})
      console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error('读取信息失败')
      }
      this.form = res.data
      this.DialogVisible = true
    },
    DialogClosed () {
      // 查看详细确定
      // this.form = null
      this.DialogVisible = false
    },
    async changeSwitch (data) {
      // console.log(data)
      const { data: res } = await this.$post('Stations/edit_alert', {id: data.id, isalert: data.isalert})
      // console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error('修改报警失败')
      }
      this.$message.success('修改报警成功')
    },
    aplayAudio () {
      this.$refs.audio.currentTime = 0 // 从头开始播放提示音
      this.$refs.audio.play() // 播放
    }
  },
  mounted () {
    if (this.timer) {
      clearInterval(this.timer)
    } else {
      this.timer = setInterval(() => {
        this.getListData()
      }, 1000)
    }
  },
  destoryed () {
    clearInterval(this.timer)
  },
  created () {
    this.getListData()
  },
  // 监听异常发生变化，语音播报
  watch: {
    dataList (val, newval) {
      // console.log('----------watch-----')
      // console.log(val)
      // console.log(newval)
      this.isalert = false
      // 处理是否报警
      newval.filter(item => {
        if (item.isalert === 1) {
          if (item.response_cpu !== 'ok') { this.isalert = true }
          if (item.response_mem !== 'ok') { this.isalert = true }
          if (item.response_pid1 !== 'ok') { this.isalert = true }
          if (item.response_cpid1 !== 'ok') { this.isalert = true }
        }
      })
      // console.log(this.isalert)
      const audio = document.getElementById('myaudio')
      if (this.isalert) {
        // 播放报警
        // this.$refs.audio.currentTime = 0 // 从头开始播放提示音
        // this.$refs.audio.play() // 播放
        this.DialogAlertVisible = true
        audio.play()
      } else {
        if (audio === null) {

        } else {
          audio.pause()
        }

        this.DialogAlertVisible = false
      }
    }
  }
}
</script>

<style  scoped>
  .el-row {
    margin-bottom: 20px;
    background: #d3deee;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
    padding-top: 10px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
